<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/contractInfo.css"/>
    <script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="js/handlebars-v3.0.3.js"></script>

    <script type="text/javascript">
        window.onload = function () {
            var oUserInfo = document.getElementById('userInfo');
            var ocCntractInfo = document.getElementById('contractInfo');
            oUserInfo.onmousedown = function () {
                ocCntractInfo.style.backgroundColor = "#fff";
                ocCntractInfo.style.color = "#000";
                oUserInfo.style.backgroundColor = "#324e75";
                oUserInfo.style.color = "#fff";
            };
            ocCntractInfo.onmousedown = function () {
                oUserInfo.style.backgroundColor = "#fff";
                oUserInfo.style.color = "#000";
                ocCntractInfo.style.backgroundColor = "#324e75";
                ocCntractInfo.style.color = "#fff";
            }
            oUserInfo.onclick = function () {
                window.location.href = 'userInfo.html';
            };
            ocCntractInfo.onclick = function () {
                window.location.href = 'contractInfo.html';
            };
            //添加合同信息


        }
    </script>
    <title>合同信息</title>
</head>

<body>
<div class="top">
    <div class="top-left">
        <p class="top-left">合同管理系统</p>
    </div>
    <div class="top-right">
        <p class="p1">欢迎管理员<span class=""> 李四 </span>的到来 <a href="#" id="logout">注销 </a></p>
        <p class="p2">您上次登录的时间是：2016-8-4 09:45</p>
    </div>
</div>
<div class="left-block">
    <ul>
        <li id="contractInfo" class="cleft-index">管理员操作</li>
        <li id="contractOpera" class="uleft-index">合同管理</li>
        <li id="userOpera" class="uleft-index">用户管理</li>
        <li id="logOpera" class="uleft-index">日志管理</li>
    </ul>
</div>
<div class="main-part">
    <ul>
        <li class="right-label">合同信息</li>
        <!--<li class=""><input class="right-btn" type="button" value="修改合同信息" /></li>-->
        <!--<li class=""><input class="right-btn" type="button" value="搜索" /></li>-->
        <li class=""><a href="javascript:add();"><input class="right-btn" type="button" id="addBtn" value="添加合同信息"/></a>
        </li>
        <li>
            <table id="table1" class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>合同ID</th>
                    <th>合同名称</th>
                    <th>起始时间</th>
                    <th>截止时间</th>
                    <th>总付款期数</th>
                    <th>提交人</th>
                    <th>提醒时间</th>
                    <th>是否提醒</th>
                    <th></th>
                </tr>
                </thead>
                <tbody id="tableList">
                </tbody>
                <script id="table-template" type="text/x-handlebars-template">
                    {{#each contract}}
                    <tr>
                        <td>{{id}}</td>
                        <td>{{contractId}}</td>
                        <td>{{contractName}}</td>
                        <td>{{startTime}}</td>
                        <td>{{deadline}}</td>
                        <td><a href="javascript:payRemind();">{{paidNum}}</a></td>
                        <td>{{userId}}</td>
                        <td>{{remind}}</td>
                        <td>{{warnOrNor}}</td>
                        <td><a href="javascript:update({{id}},);">修改</a></td>
                    </tr>
                    {{/each}}
                </script>
                <script type="text/javascript">
                    $(document).ready(function () {
                        window.onload = function () {
                            var oLogout = document.getElementById('logout');
                            oLogout.onclick = function () {
                                window.location.href = 'login.jsp';
                            };
                        }
                        //模拟的json对象
                        var data = {
                            "contract": [
                                {
                                    "id": "1",
                                    "contractId": "0228",
                                    "contractName": "合同名称",
                                    "startTime": "2009-09-09",
                                    "deadline": "2016-09-08",
                                    "paidNum": "3",
                                    "userId": "張三",
                                    "remind": "2016-08-08",
                                    "warnOrNor": "是"
                                }
                            ]
                        };


                        var myTemplate = Handlebars.compile($("#table-template").html());

                        $('#tableList').html(myTemplate(data));
                    });
                </script>

                <tr>
                    <td>1</td>
                    <td>合同ID</td>
                    <td>合同名称</td>
                    <td>2009-09-09</td>
                    <td>2016-09-08</td>
                    <td>3</td>
                    <td>张三</td>
                    <td>3周前</td>
                    <td>是</td>
                    <td><a href="javascript:update();">修改</a></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>合同ID</td>
                    <td>合同名称</td>
                    <td>2009-09-09</td>
                    <td>2016-09-08</td>
                    <td>3</td>
                    <td>张三</td>
                    <td>3周前</td>
                    <td>否</td>
                    <td><a href="javascript:update();">修改</a></td>
                </tr>
                </tbody>
            </table>
        </li>
    </ul>
</div>
</body>
</html>
<script type="text/javascript">
    function add() {
        layer.open({
            type: 2,
            title: '添加合同信息',
            shadeClose: true,
            shade: [0.3, '#000'],
            area: ['543px', '343px'],
            content: 'addContract.html'
        });
    }
    ;
    function update(con_id, con_name) {
        layer.open({
            type: 2,
            title: '添加合同信息',
            shadeClose: true,
            shade: [0.3, '#000'],
            area: ['543px', '343px'],
            content: 'addContract.html?cid=' + con_id + '&cname=' + con_name
        });
    }
    ;
    function payRemind() {
        layer.open({
            type: 2,
            title: '分期付款时间',
            shadeClose: true,
            shade: [0.3, '#000'],
            area: ['543px', '343px'],
            content: 'payRemind.html'
        });
    }


</script>

